<template>
  <!-- 搜索框组件 -->
  <div class="nav-collection">
    <el-carousel arrow="never" :autoplay="false">
      <el-carousel-item
        v-for="item in Math.ceil((headerList.length + 1) / 4)"
        :key="item"
        class="nav-container"
      >
        <draggable
          :list="headerList"
          class="dragg-type"
          @end="handlerSaveDraggableAction"
        >
          <nav-item
            v-for="item in headerList.slice((item - 1) * 4, item * 4)"
            :key="item._id"
            :headerList="item.headers"
            :typeId="item._id"
            @btnClick="handlerAddAction"
            @handlerDelete="handleDeleteAction"
            @typeUpdate="handlerUpdateTypeAction"
            @typeDelete="handlerDeleteTypeAction"
            @saveDraggable="handlerSaveDraggableAction"
          >
            <template #typeTitle>
              <span v-show="typeIsUpdate != item._id">{{
                item.type_name
              }}</span>
              <el-input
                v-show="typeIsUpdate == item._id"
                v-if="!showTypeName"
                placeholder="请输入分类名称"
                v-model="typeName"
                @keyup.enter.native="handlerUpdateTypeName(item._id)"
                clearable
              >
              </el-input>
            </template>
          </nav-item>

          <nav-type @typeClick="handleAddTypeAction" type_id="typeId">
            <template #typeName>
              <span>{{ typeName }}</span>
            </template>
          </nav-type>
        </draggable>
      </el-carousel-item>
    </el-carousel>
    <el-dialog
      title="导航信息"
      :visible.sync="showAddForm"
      width="30%"
      center
      @close="DialogClosed"
    >
      <nav-form
        ref="formRef"
        @addHeader="handlerAddHeaderInfo"
        @NotShowDialog="handlerShow"
      ></nav-form>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import NavItem from "./NavItem.vue";
import NavForm from "./NavForm.vue";
import NavType from "./NavType.vue";

import {
  getHeaderList,
  addHeader,
  deleteHeader,
  addType,
  findType,
  updateType,
  deleteType,
} from "@/api";

export default {
  name: "NavCollection",
  components: { draggable, NavItem, NavForm, NavType },
  data() {
    return {
      count: 9,
      headerList: [],
      showAddForm: false,
      typeId: "",
      showTypeForm: false,
      typeName: "",
      typeIsUpdate: "",
      showTypeName: true,
    };
  },
  created() {
    this.getHeaderList();
  },
  methods: {
    // 获取所有导航列表
    async getHeaderList() {
      const { result } = await getHeaderList();
      this.headerList = result.types;
    },
    //增加导航
    async handlerAddHeaderInfo(form) {
      form.type_id = this.typeId;
      await addHeader(form);
      this.getHeaderList();
      this.showAddForm = false;
    },
    handlerShow() {
      this.showAddForm = false;
    },
    handlerAddAction(typeId) {
      this.showAddForm = true;
      this.typeId = typeId;
    },
    DialogClosed() {
      // this.$refs.formRef.$refs.headerFormRef.resetFields()
      this.$refs.formRef.$refs.headerFormRef.model.url_address = "";
      this.$refs.formRef.$refs.headerFormRef.model.url_name = "";
    },
    //删除导航
    async handleDeleteAction(url_id) {
      await deleteHeader(url_id);
      this.getHeaderList();
    },
    //增加分类
    async handleAddTypeAction(form) {
      const { result } = await addType(form);
      this.typeName = result.type_name;
      this.getHeaderList();
    },
    //告诉父组件，我双击了。表示我要修改了.获取点击的分类信息
    async handlerUpdateTypeAction(typeId) {
      this.typeIsUpdate = typeId;
      this.showTypeName = false;
      this.typeId = typeId;
      const { result } = await findType(typeId);
      this.typeName = result.type_name;
    },
    // 修改typeName请求
    async handlerUpdateTypeName(typeId) {
      const info = {};
      info.type_name = this.typeName;
      await updateType(typeId, info);
      this.typeIsUpdate = "";
      this.showTypeName = true;
      this.getHeaderList();
    },
    //删除一个type
    async handlerDeleteTypeAction(_id) {
      await deleteType(_id);
      this.getHeaderList();
    },
    //保存拖拽后的状态
    handlerSaveDraggableAction() {
      window.localStorage.setItem("list", JSON.stringify(this.headerList));
    },
  },
};
</script>

<style lang="less">
.nav-collection {
  position: relative;
  margin: 0 auto;
  width: 1100px;
  height: 80%;
  top: 160px;
  // background-color: rgba(234, 241, 241, 0.4);
  .nav-container {
    position: absolute;
    width: 97%;
    height: 80% !important;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate(0, -50%);
    // background-color: bisque;
    .dragg-type {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100% !important;
      margin-left: 125px;
    }
    .nav-container-addType {
      background-color: rgba(255, 255, 255, 0.65);
      width: 44%;
      height: 48%;
      margin: 5px 30px;
    }
    .el-input {
      margin-top: -10px;
      width: 100%;
      // margin-top: -10px;
      margin-top: -10px;
    }
    .el-input__inner {
      padding: 0 6px !important;
      font-size: 15px;
    }
  }
}
.el-carousel {
  height: 100%;
  // transform: translate(0, -50%);
}
.el-carousel__container {
  height: 100%;
  transform: translate(0, -46%);
}
.el-carousel__item {
  margin-bottom: -30px;
}
.el-carousel__indicators {
  margin-left: 20px;
}
.el-carousel__indicators--horizontal {
  bottom: 40px;
}
.nav-collection .nav-container .el-input__inner {
  // height: 35px !important;
  font-size: 13px !important;
}
</style>
